<template>
    <!-- invite-page -->
    <div class="invite-page">
        <h1>邀请函</h1>
        <div class="introduce-item">
            <p class="introduce-item-p1">我是<span>{{userinfo.name}}</span></p>
            <p class="introduce-item-p2">我为【筑功者】代言</p>
            <p class="introduce-item-p3">邀你成为我的筑友</p>
            <p class="introduce-item-p3">一起成就自我，帮助他人</p>
            <p class="introduce-item-p4">上筑功者 成就自我</p>
        </div>
        <div class="code-box">
            <div class="triangle left-top"></div>
            <div class="triangle right-top"></div>
            <div class="triangle left-bottom"></div>
            <div class="triangle right-bottom"></div>
            <img src="~@/assets/invite-code.jpg"/>
        </div>
        <p class="code-tips">长按识别二维码了解更多</p>
        <div class="logo-area">
            <img src="~@/assets/invite-logo.png"/>
            <router-link to="/"><p>回到首页</p></router-link>
        </div>
    </div>
</template>

<script>
import {_getuserInfo} from '@/api/user/index';
export default {
    data(){
        return {
            userinfo:{},
            pid:0
        }
    },
     created(){
           //y var pid=_getCookie('zgz_fx_pid');
            var url=window.location.href;
         //   var url="http://m.zhugongzhe.com/user/invite/invite?curuid=6&from=singlemessage";
            var id=url.split("?")[1].split("&")[0].split('=')[1];
            //console.log("xxx"+id);
           //  var curuid=_getQueryPara("curuid");
            _getuserInfo(parseInt(id)).then(res=>{
                if(res.StatusCode==200){
                   this.userinfo=res.Data;
                }
            });
     }
}
</script>

<style lang="scss" scoped>
.invite-page{
    width: 100%;
    height: 100vh;
    background: url(~@/assets/invite-page.jpg) no-repeat center center;
    background-size: cover;
    position: relative;
    overflow: hidden;
    h1{
        font-size: 40px;
        color:#fff;
        text-align: center;
        margin:12% auto 10%;
        width: 120px;
    }
    .introduce-item{
        text-align: center;
        &-p1{
            font-size: 20px;
            color:#fff;
            span{
                font-weight: 600;
            }
        }
        &-p2{
            font-size: 24px;
            color:#fff;
            font-weight: 600;
            margin-bottom: 6px;
        }
        &-p3{
            font-size: 14px;
            color:#fff;
        }
         &-p4{
            font-size: 16px;
            color:#fff;
            font-weight: 600;
            margin-top: 10px;
        }
    }
    .code-box{
        width: 127px;
        height: 127px;
        margin: 80px auto 12px;
        position: relative;
        .triangle{
            width: 17px;
            height: 17px;
            position: absolute;
            border:1px solid #fff;
        }
        .left-top{
            left: 0;
            top: 0;
            border-right: none;
            border-bottom: none;
        }
         .right-top{
            right: 0;
            top: 0;
            border-left: none;
            border-bottom: none;
        }
         .left-bottom{
            left: 0;
            bottom: 0;
            border-right: none;
            border-top: none;
        }
         .right-bottom{
            right: 0;
            bottom: 0;
            border-left: none;
            border-top: none;
        }
        img{
            width: 104px;
            height: 104px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -52px;
            margin-top: -52px;
        }
        
    }
    .code-tips{
        font-size: 12px;
        color: #fff;
        text-align: center;
    }
    .logo-area{
        text-align: center;
        margin-top: 50px;
        img{
            width: 88px;
            height: 27.6px;
            margin: 0 auto;
        }
        p{
            font-size: 12px;
            color:#fff;
            margin-top: 10px;
            text-decoration: underline;
        }
    }
}
   

</style>
